<template>
  <div class="course-section">
    <back-by-name component="course-manager" title="内容整理">
      <el-button @click="addChapter($event)" type="primary">添加章节</el-button>
    </back-by-name>
    <el-card>
      <el-tree
        :data="sections"
        :props="defaultProps"
        node-key="id"
        :default-expanded-keys="[1]"
      >
        <div class="inner" slot-scope="{ node, data }">
          <!-- 内容设置 -->
          <span>{{ node.label }}</span>
          <!-- 后续按钮结构 -->
          <span v-if="data.sectionList" class="actions">
            <el-button @click="editChapter($event, data)">编辑</el-button>
            <el-button @click="addSection($event, data)">添加课时</el-button>
            <el-button @click="deleteChapter($event, data)">删除</el-button>
          </span>
          <span v-else class="actions">
            <el-button @click="editSection($event, data)">编辑</el-button>
            <el-button
              @click="
                $router.push({
                  name: 'course-video',
                  params: {
                    courseId,
                  },
                  query: {
                    sectionId: data.id,
                  },
                })
              "
              >上传视频</el-button
            >
            <el-button @click="deleteSection($event, data)">删除</el-button>
          </span>
        </div>
      </el-tree>
      <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
        <!-- 将添加与编辑功能单独封装到组件中 -->
        <el-form>
          <template v-if="title == '章节信息'">
            <el-form-item label="章节名称">
              <el-input
                v-model="chapter.name"
                placeholder="请输入章节名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="章节描述">
              <el-input
                v-model="chapter.description"
                placeholder="请输入章节描述"
              ></el-input>
            </el-form-item>
            <el-form-item label="章节排序(数字越小越靠前)">
              <el-input
                v-model="chapter.csort"
                placeholder="请输入章节排序"
              ></el-input>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item label="课时名称">
              <el-input
                v-model="section.title"
                placeholder="请输入课时名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="课时排序(数字越小越靠前)">
              <el-input
                v-model="section.sort"
                placeholder="请输入课时排序"
              ></el-input>
            </el-form-item>
          </template>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleSuccess">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getChapterAndSection,
  addChapter,
  editChapter,
  delChapter,
  addSection,
  editSection,
  delSection,
} from "@/services/course";

import backByName from "@/components/BackHeader/backByName";

export default {
  components: {
    backByName,
  },
  name: "CourseSection",
  props: {
    courseId: {
      type: [String, Number],
      required: true,
    },
  },
  created() {
    this.loadSection();
  },
  data() {
    return {
      isEdit: false,
      title: "",
      dialogVisible: false,
      // 章节信息
      sections: [],
      chapter: {
        courseId: 0,
        name: "",
        description: "",
        csort: 0,
      },
      section: {
        courseId: 0,
        chapterId: 0,
        title: "",
        sort: 0,
      },
      chapterName: "",
      sectionId: 0,
      defaultProps: {
        children: "sectionList",
        label(data) {
          // data 是章节或课时的时候，label 的属性名不同，需要检测后使用
          return data.name || data.title;
        },
      },
      isLoading: false,
    };
  },
  methods: {
    addChapter(event) {
      this.title = "章节信息";
      this.chapter = {
        name: "",
        description: "",
        csort: 0,
      };
      this.chapter.courseId = this.courseId;
      this.isEdit = false;
      this.dialogVisible = true;
      event.stopPropagation();
    },
    editChapter(event, data) {
      this.title = "章节信息";
      this.isEdit = true;
      this.chapter = {
        name: "",
        description: "",
        csort: 0,
      };
      Object.keys(this.chapter).forEach((key) => {
        this.chapter[key] = data[key];
      });
      this.chapter.courseId = this.courseId;
      this.chapter.id = data.id;
      this.dialogVisible = true;
      event.stopPropagation();
    },
    deleteChapter(event, data) {
      this.$confirm("此操作将永久删除该章节, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          delChapter({ chapterId: data.id }).then((res) => {
            this.loadSection();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addSection(event, data) {
      this.title = "课时基本信息";
      this.section = {
        title: "",
        sort: 0,
      };
      this.section.courseId = this.courseId;
      this.section.chapterId = data.id;
      this.isEdit = false;
      this.dialogVisible = true;
      event.stopPropagation();
    },
    editSection(event, data) {
      this.title = "课时基本信息";
      this.section = {
        title: "",
        sort: 0,
      };
      Object.keys(this.section).forEach((key) => {
        this.section[key] = data[key];
      });
      this.section.courseId = this.courseId;
      this.section.chapterId = data.chapterId;
      this.section.id = data.id;
      this.isEdit = true;
      this.dialogVisible = true;
      event.stopPropagation();
    },
    deleteSection(event, data) {
      this.$confirm("此操作将永久删除该课时, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          delSection({ sectionId: data.id }).then((res) => {
            this.loadSection();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSuccess() {
      if (this.title == "章节信息" && !this.isEdit) {
        addChapter(this.chapter).then((res) => {
          if (res.data.msg == "添加成功") {
            this.$message.success(res.data.msg);
            this.loadSection();
            this.dialogVisible = false;
          } else {
            this.$message.error(res.data.msg);
          }
        });
      } else if (this.title == "章节信息" && this.isEdit) {
        editChapter(this.chapter).then((res) => {
          if (res.data.msg == "更新成功") {
            this.$message.success(res.data.msg);
            this.loadSection();
            this.dialogVisible = false;
          } else {
            this.$message.error(res.data.msg);
          }
        });
      } else if (this.title == "课时基本信息" && !this.isEdit) {
        addSection(this.section).then((res) => {
          if (res.data.msg == "添加成功") {
            this.$message.success(res.data.msg);
            this.loadSection();
            this.dialogVisible = false;
          } else {
            this.$message.error(res.data.msg);
          }
        });
      } else if (this.title == "课时基本信息" && this.isEdit) {
        editSection(this.section).then((res) => {
          if (res.data.msg == "更新成功") {
            this.$message.success(res.data.msg);
            this.loadSection();
            this.dialogVisible = false;
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },
    handleCancel() {
      this.dialogVisible = false;
    },
    async loadSection() {
      const { data } = await getChapterAndSection({ courseId: this.courseId });
      this.sections = data.data;
    },
  },
  filters: {
    sel(value) {
      if (value == 0) {
        return "已隐藏";
      } else if (value == 1) {
        return "待更新";
      } else {
        return "已发布";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.inner {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

::v-deep .el-tree-node__content {
  height: auto;
}
.dialog-footer {
  display: flex;
  justify-content: space-evenly;
  .el-button {
    width: 100px;
  }
}
</style>
